<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>dds</title>
    <style>
        .mainPanel{
            width: 500px;
            height: 500px;
            border: 3px solid black;
            margin: 0px auto;

        }
        .innerDiv{
            width: 80px;
            height: 80px;
            border: 1px solid black;
            margin: 9px;
            float: left;
            background: url(imgs/niu0.jpg);
        }
        /* 先把图片隐藏起来 */
            .innerDiv img{
            display: none; 

        }
        .controlPannel{
            width: 180px;
            height: 120px;
            border: 1px solid black;
            margin: 9px auto;
            text-align: center;


        }
        .timespan{
            color: #8e1e1e;
        }
        .scorespan{
            color: #0bc330;
        }
        p{
            margin-top: 1px;
        }

        .gameoverPannel{
            width: 300px;
            height: 200px;
            border: 5px solid gray;
            background-color: lightcyan;
            /* margin: auto;
            display: none; */
            text-align: center;
            line-height: 200px;
            font-size: 30px;
            border-radius: 10%;
            position: absolute;
            top: 20%;
            left: 39.25%;
            display: none;
        }

    </style>

</head>
<body>
    <div id="mainPanel" class="mainPanel">
        <!-- <div class="innerDiv"><img src="imgs/niu1.jpg"></div>
        <div class="innerDiv"></div>
        <div class="innerDiv"></div>
        <div class="innerDiv"></div>
        <div class="innerDiv"></div>
        <div class="innerDiv"></div>
        <div class="innerDiv"></div>
        <div class="innerDiv"></div>
        <div class="innerDiv"></div>
        <div class="innerDiv"></div>
        <div class="innerDiv"></div>
        <div class="innerDiv"></div>
        <div class="innerDiv"></div>
        <div class="innerDiv"></div>
        <div class="innerDiv"></div>
        <div class="innerDiv"></div>
        <div class="innerDiv"></div>
        <div class="innerDiv"></div>
        <div class="innerDiv"></div>
        <div class="innerDiv"></div>
        <div class="innerDiv"></div>
        <div class="innerDiv"></div>
        <div class="innerDiv"></div>
        <div class="innerDiv"></div>
        <div class="innerDiv"></div> -->


    </div>
    <div class="controlPannel"> 
        <p>计时：<span id="timespan" class="timespan">0  </span>秒</p>
        <p>记分：<span  id="scorespan" class="scorespan">0  </span>分</p>
        <p><input type="button" value="开始" onclick="startGame()">
            <input type="button" value="结束" onclick="gameOver()">
            </p>
    </div>
    <div class="gameoverPannel">
        游戏结束了！
    </div>
    
</body>

<script>

    let timeTask;
    let mouseTask;
    for (let i = 0; i < 25; i++) {
        let conment = `<div class="innerDiv"><img id="img${i}" src="imgs/shou03.jpg" onclick = "hitmouse(this)"></div>`
        document.getElementById("mainPanel").innerHTML += conment;
        
    }
    // 点击开始之后，有一个计时的任务，
    function startGame(){
        timeTask =  setInterval(() => {
           let old = parseFloat(document.getElementById("timespan").innerHTML);
           let newVAL = (old + 0.01).toFixed(2);
           document.getElementById("timespan").innerHTML = newVAL;
            if (newVAL==6) {
                gameOver();
            }

        }, 10);



    
      

        mouseTask = setInterval(() => {
           let  numdNum =     parseInt(Math.random()*25) 
           let imgNewId = "img" + numdNum;
           document.getElementById(imgNewId).src = "imgs/shou03.jpg"
            document.getElementById(imgNewId).style.display = "block";
            
            setTimeout(function (){
                document.getElementById(imgNewId).style.display ="none";
            },2000)
            

        }, 800);

    }

    function showImg(){
        let rundnum =  parseInt(Math.random() *25);
        let rundId = "img" + rundnum;
        console.log(document.getElementById(rundId));
        document.getElementById(rundId).style.display = "block"

        setTimeout(function(){
                document.getElementById(rundId).style.display = "none"
        },2000)       
}
    function hitmouse(myo){
        console.log(myo.src);
       
        if(myo.src.indexOf("imgs/shou03.jpg")>=0){
            myo.src = "./imgs/shu01.jpg"
        let newVAL = parseInt(document.getElementById("scorespan").innerHTML) + 1;
        document.getElementById("scorespan").innerHTML = newVAL;
     
        
        if (newVAL==5) {
            gameOver();
        }

    }

    }

    function gameOver(){
        clearInterval(timeTask);
        clearInterval(mouseTask);
        for (let i = 0; i < 25; i++) {
            let id = "img" + i;
            document.getElementById(id).style.display = "none"
        }
        let zuizhongdefen =  document.getElementById("scorespan").innerHTML;
        document.getElementsByClassName("gameoverPannel")[0].innerHTML = "你的得分是" + zuizhongdefen + "分，你可真强！";
        document.getElementsByClassName("gameoverPannel")[0].style.display = "block";
        
    }
</script>

</html>